<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:28
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:15:54
 * @FilePath: \i-hos-app\shared\emr\src\components\common\Tooth.vue
 * @Description: 恒牙牙位图组件
-->
<template>
  <div class="tooth">
    <div @click.native.prevent>
      <h3>恒牙牙位图</h3>
      <div class="tooth_select">
        <div class="flex-itemCenter" v-for="n in 4" :key="n">
          <label>{{ n == 1 ? '左上' : n == 2 ? '右上' : n == 3 ? '左下' : '右下' }}</label>
          <el-button-group class="flex-reverse">
            <el-button
              v-for="num in 8"
              :class="[
                n == 1
                  ? c_toothSeat.leftTop.indexOf(String(num)) >= 0
                    ? 'active'
                    : ''
                  : n == 2
                  ? c_toothSeat.rightTop.indexOf(String(num)) >= 0
                    ? 'active'
                    : ''
                  : n == 3
                  ? c_toothSeat.leftBottom.indexOf(String(num)) >= 0
                    ? 'active'
                    : ''
                  : n == 4
                  ? c_toothSeat.rightBottom.indexOf(String(num)) >= 0
                    ? 'active'
                    : ''
                  : '',
              ]"
              :key="n == 1 ? '左上' : n == 2 ? '右上' : n == 3 ? '左下' : '右下' + num"
              @click="
                (event: any) => {
                  checkTooth(event, n == 1 ? '左上' : n == 2 ? '右上' : n == 3 ? '左下' : '右下')
                }
              "
              >{{ num }}</el-button
            >
          </el-button-group>
        </div>
      </div>
    </div>
    <footer slot="footer" class="dialog-footer">
      <el-button @click="cancelTooth">取消</el-button>
      <el-button type="primary" @click="sureTooth">确定</el-button>
    </footer>
  </div>
</template>

<script setup lang="ts">
  import { Ref, ref, toRefs, computed, ComputedRef } from 'vue'
  // 获取公共的hooks
  import { useCommon } from '../../hooks/useCommon'
  // 公共函数
  import { asc, des } from '../../utils/index'
  // 接口约束
  import { IToothSeat, IPageConfigStore } from '../../interface/page'
  // store数据
  import { usePageConfigStore } from '../../store/pageConfig'
  // 解构 store的配置数据, 获取光标的位置或选定对象
  const pageConfigStore: IPageConfigStore = usePageConfigStore()
  const { val } = toRefs<any>(pageConfigStore)
  const toothSeat: Ref<IToothSeat> = ref({
    leftTop: [], // 左上牙位
    rightTop: [], // 右上牙位
    leftBottom: [], // 左下牙位
    rightBottom: [], // 右下牙位
  })
  const c_toothSeat: ComputedRef<IToothSeat> = computed((): IToothSeat => {
    let data = !!val.value.toothSeat ? val.value.toothSeat : toothSeat.value
    data.leftTop = Array.from(new Set(data.leftTop))
    data.rightTop = Array.from(new Set(data.rightTop))
    data.leftBottom = Array.from(new Set(data.leftBottom))
    data.rightBottom = Array.from(new Set(data.rightBottom))
    return data
  })

  // 删除牙位数据
  const romoveTooth = (arr: string[], val: string): void => {
    arr.splice(arr.indexOf(val), 1)
  }
  // 添加牙位数据
  const addTooth = (arr: string[], val: string): void => {
    arr.push(val)
  }

  // 牙位选择
  const checkTooth = (event: any, type: string) => {
    let classList: any = event.target.nodeName == 'BUTTON' ? event.target.classList : event.target.parentElement.classList
    let text: string = event.target.innerText
    // 改变选择的状态以及储存选择对应的数据
    if (classList.value.includes('active')) {
      classList.remove('active')
      if (type == '左上') {
        romoveTooth(c_toothSeat.value.leftTop, text)
      } else if (type == '右上') {
        romoveTooth(c_toothSeat.value.rightTop, text)
      } else if (type == '左下') {
        romoveTooth(c_toothSeat.value.leftBottom, text)
      } else if (type == '右下') {
        romoveTooth(c_toothSeat.value.rightBottom, text)
      }
    } else {
      classList.add('active')
      if (type == '左上') {
        addTooth(c_toothSeat.value.leftTop, text)
      } else if (type == '右上') {
        addTooth(c_toothSeat.value.rightTop, text)
      } else if (type == '左下') {
        addTooth(c_toothSeat.value.leftBottom, text)
      } else if (type == '右下') {
        addTooth(c_toothSeat.value.rightBottom, text)
      }
    }
  }
  // 获取设置属性
  const { setConfig } = useCommon()

  // 定义向父组件传值的事件
  const $emit = defineEmits<{
    (e: 'toAddTooth', c_toothSeat: IToothSeat): void
  }>()

  // 添加牙位图
  const sureTooth = (): void => {
    // 右边升序排列
    c_toothSeat.value.rightTop.sort(asc())
    c_toothSeat.value.rightBottom.sort(asc())
    // 左边降序排列
    c_toothSeat.value.leftTop.sort(des())
    c_toothSeat.value.leftBottom.sort(des())
    // 向父元素传递数据
    $emit('toAddTooth', c_toothSeat.value)
    // 修改配置仓库
    pageConfigStore.$patch?.((state: IPageConfigStore) => {
      state.val.toothSeat = c_toothSeat.value
      let el = document.getElementById(state.el) as any
      if (!!el && el != null) {
        el.querySelector('.tl').innerText = c_toothSeat.value.leftTop.join(' ')
        el.querySelector('.tr').innerText = c_toothSeat.value.rightTop.join(' ')
        el.querySelector('.bl').innerText = c_toothSeat.value.leftBottom.join(' ')
        el.querySelector('.br').innerText = c_toothSeat.value.rightBottom.join(' ')
      }
      state.commonComponentActive = ''
      setConfig()
    })
  }

  // 取消
  const cancelTooth = (): void => {
    pageConfigStore.$patch?.((state: IPageConfigStore) => {
      state.commonComponentActive = ''
    })
  }
</script>

<style scoped lang="scss">
  .tooth {
    box-shadow: 0 0 3px #ccc;
    padding: 10px;
    border-radius: 4px;
    background-color: #fff;
  }
  .tooth_select {
    display: flex;
    flex-wrap: wrap;
    width: 415px;
    > div {
      width: 50%;
      padding: 10px;
      &:nth-of-type(1) {
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
      }
      &:nth-of-type(2) {
        border-bottom: 1px solid #000;
      }
      &:nth-of-type(3) {
        border-right: 1px solid #000;
      }
    }
  }
  .dialog-footer {
    border-top: 1px solid #ebebeb;
    padding-top: 10px;
    margin-top: 15px;
  }
  :deep(.el-button--small) {
    padding: 6px;
  }
  .active {
    background: #409eff;
    color: #fff;
  }
  .flex-reverse {
    display: flex;
    flex-direction: row-reverse;
  }
  .flex-itemCenter {
    display: flex;
    align-items: center;
    &:nth-of-type(2),
    &:nth-of-type(4) {
      direction: rtl;
    }
  }
</style>
